<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <p>v-for指令：循环生成dom结构</p>
        <!-- 循环数组，最常用 -->
        <!-- 如果有两个参数，第一个是数组项，第二个是下标,顺序固定 -->
        <!-- key 绑定了元素节点和数据，当数据更新时可以直接找到对应的节点并更新，提高渲染效率 -->
        <!-- key值应是唯一的，数据类型是数字或者字符串。否则可能会造成渲染错误.简单处理方式：当做id处理 -->
        <button v-for="(num,index) in arr1" v-bind:key="index">{{index}}---{{num}}</button>
        <div>
            <button v-for="(num,index) in arr1" v-bind:key="index">{{index}}---{{num}}</button>
        </div>
        <hr>
        <!-- v-for循环对象 -->
        <!-- 完整的参数有三个，按照顺序分别是val、key、index -->
        <p v-for="(val,key,index) in obj1" :key="key">{{index+1}}. {{key}}-{{val}}</p>
        <!-- v-for循环数字。正整数.只有一个参数 -->
        <button v-for="num in 5" :key="100+num">{{num}}</button>
        <!-- v-for循环字符串 -->
        <span v-for="(str,index) in obj1.name" :key="'szdd'+index">{{str}}</span>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                arr1: [1,2,3,4,5.5],
                obj1: {
                    colorVal: [99, 98, 100],
                    name: 'yyqx',
                    age: 18
                }
            }
        })
    </script>
</body>
</html>